<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
    <link rel="stylesheet" href="./guess.css">
</head>
<body>
    <input type="button" value="重新开始" onclick="reset()"><br>
    请输入要猜的数字：<input type="text"  class="input" onkeydown="handleEnter(event)"> 
    <input type="button" value="猜" onclick="guess()">
    <br>已经猜的次数：<span class="num">0</span><br>
    结果：<span class="result"></span>
</body>
<script>
    let input=document.querySelector('.input');
    console.dir(input);
    let num=document.querySelector('.num');
    console.dir(num);
    let result=document.querySelector('.result');
    console.dir(result);
    function reset(){
        input.value=0;
        num.innerHTML=0;
        result.innerHTML="";
    }

    let n=Math.floor(Math.random()*100)+1;
    console.log(n);
    function guess(){
        num.innerHTML= parseInt(num.innerHTML)+1;
        if(parseInt(input.value)==n){
            result.innerHTML="恭喜你猜对了";
            result.className="true"
        }else if(parseInt(input.value)>n){
            result.innerHTML="猜大了";
            result.className="false"
        }else{
            result.innerHTML="猜小了";
            result.className="false"
        }
    }

    function handleEnter(event){
        if(event.key=='Enter'){
            event.preventDefault();
            guess();
        }
    }
</script>
</html>